import React from 'react'
import ReactDOM from 'react-dom/client'
import 'animate.css'

// react-redux 此库便于我们在react组件中操作redux
import { Provider } from 'react-redux'
import store from './store'

import Home from '@/pages/Home'
import Admin from '@/views/Admin'
import User from '@/views/User'
import Food from '@/views/Food'

import { createBrowserRouter, RouterProvider } from 'react-router-dom'
// 定义路由规则
const routes = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
    // 组件渲染中出现异常时，路由的正常渲染路径
    errorElement: <div>页面发生异常</div>
  },
  {
    path: '/admin',
    element: <Admin />,
    children: [
      {
        index: true,
        element: <User />
      },
      {
        path: 'user',
        element: <User />
      },
      {
        path: 'food',
        element: <Food />
      },
      {
        path: '*',
        element: <Food />
      }
    ]
  }
])

// 给原生的String添加一个toSearch方法
String.prototype.toSearch = function () {
  const search = this + ''
  return Object.fromEntries(new URLSearchParams(search).entries())
}

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <RouterProvider router={routes} />
  </Provider>
)

export default root
